<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="libs/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="pub/JSCommonUtil.js"></script>
		<title>常规页面联动</title>
	</head>


	<body>
		<p>
			由于为了保持项目的轻便性，不参与业务逻辑，仅对表单部分做了简单的事件处理，其他部分的事件处理需要自己编写
		</p>
		<h3 style="text-align:center">动态绑定。需要注意reset问题,以及表单验证</h3>
		<div class='main' >

			<div style="float:left ;width:30%" id='leftPanel'>
				
			</div>
			<div style="float:right ;width:70%" id="rightPanel">
				
			</div>
		</div>
		<div style="clear:both"></div>
		<hr/>
		<h3 style="text-align:center">表单提交绑定</h3>

		<div class='main'>
			<div style="float:left;width:30%;" id="leftPanel1"></div>
			<div style="float:right ;width:70%" id="rightPanel1">
				
			</div>
		</div>
		
		<script type="text/javascript">
		var session={};
		$(function(){
			var data={
				data:[
					{
						title:"Alice in Wonderland",
						desc:"Alice's Adventures in Wonderland (commonly shortened to Alice in Wonderland) is an 1865 novel written by English author Charles Lutwidge Dodgson under the pseudonym Lewis Carroll.[1] It tells of a girl named Alice who falls down a rabbit hole into a fantasy world populated by peculiar, anthropomorphic creatures. The tale plays with logic, giving the story lasting popularity with adults as well as with children.[2] It is considered to be one of the best examples of the literary nonsense genre.[2][3] Its narrative course and structure, characters and imagery have been enormously influential[3] in both popular culture and literature, especially in the fantasy genre.",
						price:15
					},
					{
						title:"Bridge to Terabithia ",
						desc:"Bridge to Terabithia is a work of children's literature about two lonely children who create a magical forest kingdom. It was written by Katherine Paterson and was published in 1977 by Thomas Crowell. In 1978, it won the Newbery Medal. Paterson drew inspiration for the novel from a real event that occurred in August 1974 when a friend of her son was struck by lightning and killed.",
						price:16
					},
					{
						title:"Die Leiden des jungen Werthers",
						desc:"The Sorrows of Young Werther (German: Die Leiden des jungen Werthers) is an epistolary and loosely autobiographical novel by Johann Wolfgang von Goethe, first published in 1774; a revised edition of the novel was published in 1787. Werther was an important novel of the Sturm und Drang period in German literature, and influenced the later Romantic literary movement.",
						price:20
					},
					{
						title:"The Count of Monte Cristo",
						desc:"The Count of Monte Cristo (French: Le Comte de Monte-Cristo) is an adventure novel by French author Alexandre Dumas (père) completed in 1844. It is one of the author's most popular works, along with The Three Musketeers. Like many of his novels, it is expanded from plot outlines suggested by his collaborating ghostwriter Auguste Maquet.[1]",
						price:17
					}
					
				]
			}


			jc.render(data,"pageDuplex",$("#leftPanel"),function(th){
				jc.render(th.data().data[0],"pageDuplex1",$("#rightPanel"));
				$("#leftPanel").find("li").click(function(e){
					var elemData= th.data().data[e.currentTarget.getAttribute("path")]
					jc.render(elemData,"pageDuplex1",$("#rightPanel"),function(t){

					})
				})
			})




			var data1 = jc.mix(true,{},data)
			function renderRightPanel1(data,index){
				jc.render(data,"pageDuplex1",$("#rightPanel1"),function(t){
					$("#rightPanel1").find('form').submit(function(e){
						e.preventDefault();
						//做业务逻辑,例如传递给服务器
						//如果成功...
						jc.mix(true,jc.th($("#leftPanel1")).data().data[index],data)//更改数据
						return false;
					})
				})
			}
			jc.render(data1,"pageDuplex",$("#leftPanel1"),function(th){
				$("#leftPanel1").find("li").click(function(e){
					var index = e.currentTarget.getAttribute("path");
					var elemData= th.data().data[index]
					elemData = jc.mix(true,{},elemData)
					renderRightPanel1(elemData,index)
				})
				renderRightPanel1(jc.mix(true,{},th.data().data[0]),0)
			})
		})
		

		</script>
	</body>
</html>